{include "INC_header.html" title="控制面板" bodyStyle="overflow:hidden"}
<!-- 框架页 -->
<div class="app-outlet" id="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <aside style="width: 120px;">
            <div class="app-icon">INPHP</div>
            <menu>
                <a-tooltip placement="right" :title="module.name" v-for="(module, index) in modules">
                    <div class="item" :class="{ active: index==moduleIndex }" @click="setMenu(index)">
                        <div class="start"><i :class="module.icon"></i></div>
                        <div class="center">{{ module.name.length > 4 ? module.name.slice(0, 4) : module.name }}</div>
                    </div>
                </a-tooltip>
            </menu>
        </aside>
        <!-- 子菜单 -->
        <aside class="extend-module" v-if="menus.length > 0" style="width: 121px;">
            <div class="module-name">{{ selfModel.name }}</div>
            <menu>
                <dl v-for="(menu, mi) in menus" :class="{ open: menu.open === true || menu.open === undefined }">
                    <dt>
                        <template v-if="menu.subMenu != undefined && menu.subMenu != null && menu.subMenu.length > 0">
                            <div class="item-hd" @click="toggleMenu(mi)">
                                <div class="start" v-if="menu.icon != null && menu.icon != undefined && menu.icon != ''"><i :class="menu.icon"></i></div>
                                <div class="center">{{ menu.name.length > 4 ? menu.name.slice(0, 4) : menu.name }}</div>
                                <div class="end">
                                    <i class="fa-regular fa-chevron-right"></i>
                                </div>
                            </div>
                        </template>
                        <a-tooltip v-else placement="right" :title="menu.name">
                            <div class="item" :class="{ active: menuIndex==mi && subMenuIndex==-1  }" @click="selectMenu(mi)" >
                                <div class="start"><i :class="menu.icon"></i></div>
                                <div class="center">{{ menu.name }}</div>
                            </div>
                        </a-tooltip>
                    </dt>
                    <dd v-if="menu.subMenu != undefined && menu.subMenu != null && menu.subMenu.length > 0">
                        <a-tooltip v-for="(sm, si) in menu.subMenu" placement="right" :title="sm.name">
                            <div :class="{ active:menuIndex==mi && subMenuIndex==si }" class="item" @click="selectSubMenu(mi, si)">
                                <div class="start" v-if="sm.icon != null && sm.icon != undefined && sm.icon != ''"><i :class="sm.icon"></i></div>
                                <div class="center">{{ sm.name }}</div>
                            </div>
                        </a-tooltip>
                    </dd>
                </dl>
            </menu>
            <div class="padding" style="background: var(--background);" v-if="selfModel.extUrl !== undefined && selfModel.extUrl !== null">
                <a-button type="dashed" :href="selfModel.extUrl" target="_blank" block>独立后台 <i style="margin-left: 6px;" class="fa-solid fa-arrow-up-right-from-square"></i></a-button>
            </div>
        </aside>
        <div class="app-container">
            <header>
                <div class="start justify-center">
                    <a-breadcrumb>
                        <a-breadcrumb-item v-for="b in location"><template v-if="b.url === undefined || b.url === null || b.url === '' ">{{ b.name }}</template><a :href="b.url" v-else>{{ b.name }}</a></a-breadcrumb-item>
                    </a-breadcrumb>
                </div>
                <div class="center"></div>
                <div class="end" v-if="adminHome != null && adminHome != ''">
                    <a-tooltip title="控制面板首页" placement="bottom">
                        <a-button shape="circle" @click="home()">
                            <template #icon>
                                <i class="fa-regular fa-window"></i>
                            </template>
                        </a-button>
                    </a-tooltip>
                </div>
                <div class="end">
                    <a-tooltip title="打开网站首页" placement="bottom">
                        <a-button shape="circle" href="/" target="_blank">
                            <template #icon>
                                <i class="fa-light fa-house"></i>
                            </template>
                        </a-button>
                    </a-tooltip>
                </div>
                <div class="end">
                    <a-popover :title="user.admin == 1 ? '超级管理员' : '普通账号'" placement="bottomRight">
                        <template #content>
                            <div class="text-small">
                                <div class="ui flex-item padding-bottom-half">
                                    <div class="center medium-text">账号</div>
                                    <div class="end">{{ user.username }}</div>
                                </div>
                                <div class="ui flex-item padding-bottom-half">
                                    <div class="center medium-text">昵称</div>
                                    <div class="end">{{ user.nickname }}</div>
                                </div>
                                <div class="ui flex-item padding-bottom-half">
                                    <div class="center medium-text">手机</div>
                                    <div class="end">{{ user.phone != '' && user.phone != null ? ('+' + user.countryCode + ' ' + user.phone) : '-' }}</div>
                                </div>
                                <div class="ui flex-item padding-bottom-half">
                                    <div class="center medium-text">注册时间</div>
                                    <div class="end">{{ user.registerTime || '-' }}</div>
                                </div>
                                <div class="ui flex-item padding-bottom-half">
                                    <div class="center medium-text">IP</div>
                                    <div class="end">{{ user.ip || '-' }}</div>
                                </div>
                            </div>
                            <div class="">
                                <a-button block @click="logout()">退出控制面板</a-button>
                            </div>
                        </template>
                        <a-avatar :size="32" :src="user.face" style="background: #fff; border: solid 1px #ddd;">
                            <i class="fa-light fa-user-tie dark-text" v-if="user.face == null"></i>
                        </a-avatar>
                    </a-popover>
                </div>
            </header>
            <main>
                <iframe ref="contentFrame" width="100%" height="100%" scrolling="auto" :src="iframeSrc ? (iframeSrc + (iframeSrc.indexOf('?') > 0 ? '&' : '?') + 'inFrame=1') : null" frameborder="0"></iframe>
            </main>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, notification, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //数据
                moduleIndex: 0,
                menuIndex: 0,
                subMenuIndex: -1,
                //当前链接
                iframeSrc: null,
                //控制面板首页(自定义)
                adminHome: null,
                //账号信息
                user: {
                    uid: 0,
                    username: '',
                    nickname: '',
                    phone: '',
                    countryCode: 86,
                    face: null,
                    admin: 0
                },
                //可用模块列表
                modules: [],
                //菜单
                menus: [],
                //当前选择的模块
                selfModel: {
                    name: null,
                    icon: null,
                    extUrl: null
                },
                //位置信息
                location: [
                    { name:"控制台" }
                ],
                storeKey: ''
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function (resetMenu) {
                resetMenu = resetMenu === undefined ? true : resetMenu;
                const hide = message.loading('正在加载菜单数据', 0);
                let self = this;
                axios.get("{url url='/admin/api/modules/menus'}").then(({ data }) => {
                    hide();
                    if (data.error !== 0) {
                        if (data.error === 30) {
                            window.location.href = "{url url='/admin/admin/login'}";
                        } else {
                            message.error(data.message);
                        }
                    } else {
                        let modules = data.data;
                        modules.sort((a, b) => {
                            return a.weight - b.weight;
                        });
                        self.modules = modules;
                        if (self.modules.length > 0) {
                            self.selfModel = modules[0];
                            if (resetMenu) {
                                let menus = self.modules[0].menus;
                                if (menus.length === 1 && (menus[0].subMenu == undefined || menus[0].subMenu == null || menus[0].subMenu.length == 0)) {
                                    this.location = [
                                        { name:menus[0].name }
                                    ];
                                    setTimeout(() => {
                                        this.iframeSrc = menus[0].url;
                                    }, 100);
                                } else {
                                    this.menus = menus;
                                    if (menus.length > 0) {
                                        if (menus[0].subMenu!=undefined && menus[0].subMenu!=null && menus[0].subMenu.length > 0) {
                                            this.location = [
                                                { name:menus[0].name },
                                                { name:menus[0].subMenu[0].name }
                                            ];
                                            setTimeout(() => {
                                                this.iframeSrc = menus[0].subMenu[0].url;
                                            }, 100);
                                            this.subMenuIndex = 0;
                                        } else {
                                            this.location = [
                                                { name:menus[0].name },
                                            ];
                                            setTimeout(() => {
                                                this.iframeSrc = menus[0].url;
                                            }, 100);
                                        }
                                    }
                                }
                            }
                        }
                        if (resetMenu) {
                            //加载默认后台主页
                            self.getConfig();
                        }
                    }
                }).catch(() => {
                    hide();
                    message.error("加载菜单失败");
                });
                //获取账户信息
                this.getUserInfo();
            },
            getUserInfo: function () {
                const hide = message.loading('正在加载账户数据', 0);
                let self = this;
                axios.get("{url url='/admin/api/user'}").then(({ data }) => {
                    hide();
                    if (data.error !== 0) {
                        if (data.error === 30) {
                            window.location.href = "{url url='/admin/admin/login'}";
                        } else {
                            message.error(data.message);
                        }
                    } else {
                        self.user = data.data;
                    }
                }).catch(() => {
                    hide();
                    message.error("加载账户失败");
                });
            },
            home() {
                if (this.adminHome) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = this.adminHome;
                    }, 0);
                }
            },
            toggleMenu(index) {
                this.menus[index].open = this.menus[index].open === undefined ? false : !this.menus[index].open;
            },
            setMenu: function (index) {
                let menus = this.modules[parseInt(index)].menus;
                if (index !== this.moduleIndex) {
                    this.menus = [];
                    this.moduleIndex = index;
                    this.selfModel = this.modules[parseInt(index)];
                    this.menuIndex = -1;
                    this.subMenuIndex = -1;
                }
                if (menus.length === 1 && (menus[0].subMenu == undefined || menus[0].subMenu == null || menus[0].subMenu.length == 0)) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = menus[0].url;
                    }, 0);
                    this.location = [
                        { name:menus[0].name }
                    ];
                } else {
                    this.menus = menus;
                }
            },
            //支持多次点击同一个菜单刷新页面
            selectMenu: function (index) {
                let url = this.menus[index].url;
                this.location = [
                    { name:this.menus[index].name },
                ];
                if (url == this.iframeSrc) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = url;
                    }, 0);
                } else {
                    this.iframeSrc = url;
                }
                this.menuIndex = index;
                this.subMenuIndex = -1;
            },
            selectSubMenu(mi, si) {
                let menu = this.menus[mi].subMenu[si];
                this.location = [
                    { name:this.menus[mi].name },
                    { name:menu.name }
                ];
                if (menu.url == this.iframeSrc) {
                    this.iframeSrc = '';
                    setTimeout(() => {
                        this.iframeSrc = menu.url;
                    }, 0);
                } else {
                    this.iframeSrc = menu.url;
                }
                this.menuIndex = mi;
                this.subMenuIndex = si;
            },
            getConfig: function () {
                const hide = message.loading('加载后台主页');
                let self = this;
                axios.get("{url url='/admin/api/config'}").then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.adminHome = data.data.adminHome || null;
                        self.storeKey = data.data.store.key;
                        if (self.adminHome) {
                            self.iframeSrc = src;
                        }
                    }
                }).catch(() => { hide();message.error("服务端繁忙");})
            },
            logout: function () {
                let self = this;
                Modal.confirm({
                    content: "确定退出？",
                    onOk(){
                        return new Promise((resolve, reject) => {
                            axios.get("{url url='/admin/api/user/logout'}").then(({ data }) => {
                                window.location.href = "{url url='/admin/admin/login'}";
                                resolve();
                            }).catch(() => { message.error("服务端繁忙"); reject(); })
                        });
                    },
                    cancelText: "取消",
                    okText: "确定"
                })
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //安装事件
    let installLoading = [];
    //监听相关事件
    window.onmessage = _event => {
        let msg = _event.data;
        if (typeof msg === 'object' && msg.event) {
            switch (msg.event) {
                case "location":
                    //路径监听
                    vm.location = msg.data || [{ name:'未知页面'  }];
                    break;
                case "reloadModules":
                    //重载模块数据，但不刷新菜单、框架URL
                    vm.initData(false);
                    break;
                case "checkModule":
                    //检测应用模块，成功时返回应用模块数据
                    axios.get("{url url='/admin/api/modules/check'}", {
                        params: {
                            appid: msg.data.appid || 0
                        }
                    }).then(({ data }) => {
                        if (data.error === 7000 || data.error === 0) {
                            //唤起安装界面
                            sendMessageToFrameWindow({
                                event: "checkModule",
                                data: data.data,
                                installNow: msg.data.installNow || false
                            });
                        } else {
                            message.error(data.message);
                        }
                    });
                    break;
                case "installModule":
                    //安装应用模块
                    axios.post("{url url='/admin/api/modules/install'}", { appid: msg.data.appid || 0 }).then(({ data }) => {
                        if (data.error === 0) {
                            //唤起安装界面
                            sendMessageToFrameWindow({
                                event: "installModule",
                                data: {
                                    appid: msg.data.appid || 0,
                                    state: 2
                                }
                            });
                            installLoading[msg.data.appid] = message.loading("正在安装应用：" + msg.data.appid, 0);
                            //定期检测安装结果
                            setTimeout(() => checkInstalled(msg.data.appid), 1000);
                        } else {
                            message.error(data.message);
                        }
                    }).catch(() => {
                        message.error("服务端繁忙，请稍后再试");
                    });
                    break;
                case "checkStoreKey":
                    sendMessageToFrameWindow({
                        event: "checkStoreKey",
                        data: {
                            key: vm.$data.storeKey
                        }
                    });
                    break;
                case "reload":
                    window.location.reload();
                    break;
                case "login":
                    window.location.href = "{url url='/admin/admin/login'}";
                    break;
            }
        }
    }
    function checkInstalled(appid) {
        //检测应用模块，成功时返回应用模块数据
        axios.get("{url url='/admin/api/modules/check'}", {
            params: {
                appid
            }
        }).then(({ data }) => {
            if (data.error === 7000 || data.error === 0) {
                //未安装
                if (data.data.state == 1) {
                    //安装完成
                    notification.success({
                        message: "应用安装成功",
                        description: "应用" + appid + "已安装完成，请前往应用管理页面启用该应用模块即可！"
                    });
                    //重载
                    vm.initData(false);
                    if (installLoading[appid]) {
                        //结束loading
                        installLoading[appid]();
                    }
                    //通知
                    sendMessageToFrameWindow({
                        event: "installModule",
                        data: {
                            appid,
                            state: 1
                        }
                    });
                } else {
                    //1秒后重查
                    setTimeout(() => {
                        checkInstalled(appid);
                    }, 1000);
                }
            }
        });
    }
    //往子窗口发送消息数据
    function sendMessageToFrameWindow(data) {
        vm.$refs.contentFrame.contentWindow.postMessage(data)
    }
</script>
{include "INC_footer.html"}